<template>
	<view class="niceui-checkbox-button">
		<view class="scenes-list">
			<text class="scene-item" @click="toogle(sub.time)" :class="checkItems.includes(sub.time)?'active':''" v-for="sub in items">{{sub.time}}</text>
			<view class="scene-item1" v-if="isOpenCustom" @click="showCustomerInputFlag=true"><uni-icons type="plusempty" size="15"></uni-icons>自定义</view>
		</view>
		<view class="customer-view" v-show="showCustomerInputFlag">
			<input class="uni-input" v-model="customerInput" placeholder="输入一个名称试试" />
			<view class="btn_code" style="top:36rpx">
				<button @click="addItem">确定</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			// 是否开启自定义选项
			isOpenCustom: {
				type: Boolean,
				default: false, // 默认不开启
			},
			// 是否使用自定义样式
			isUseDefault: {
				type: Boolean,
				default: true, // 默认使用
			},
			items: {
				type: Array,
				default () {
					return [];
				},
			},
			// 父组件v-model传参，子组件props中key为'value'接收，'input'事件更改
			value: {
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				checkItems: JSON.parse(JSON.stringify(this.value)),
				showCustomerInputFlag: false,
				customerInput: ''
			}
		},
		methods: {
			toogle(v) {
				let arr = this.checkItems;
				let indexs = arr.indexOf(v)
				if (indexs == -1) {
					arr.push(v)
				} else {
					arr.splice(indexs, 1)
				}
				console.log(arr)
				// 无论那种模式，都需要更改并通知外层使用组件
				this.$emit("input", arr); // input事件控制v-model的数据更改
			},
			addItem() {
				if (this.customerInput) {
					let flag = false;
					this.items.filter(item => {
						if (this.customerInput == item.text) {
							flag = true;
						}
					})
					if (flag) {
						uni.showToast({
							title: this.customerInput + "已存在",
							icon: 'error'
						})
						return;
					}
					this.items.push({ text: this.customerInput, value: this.customerInput });
					this.checkItems.push(this.customerInput);
					this.showCustomerInputFlag = false
					this.customerInput = ''
				}
			},
		}
	}
</script>
<style lang="scss">
	.scenes-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.scene-item {
			width: 214rpx;
			height: 148rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			margin-top: 42rpx;
			text-align: center;
			line-height: 145rpx;
			margin-right: 10rpx;
		}

		.scene-item+.scene-item {}

		.active {
			width: 214rpx;
			height: 148rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			margin-top: 42rpx;
			text-align: center;
			line-height: 145rpx;
			margin-right: 10rpx;
			background: #0C8D56 !important;
			color: #fff;
		}
	}

	.customer-view {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-input {
		border: solid 2rpx #eee;
		width: 60%;
		height: 90rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
	}

	.scene-item1 {
		width: 214rpx;
		height: 196rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin-top: 42rpx;
		text-align: center;
		line-height: 196rpx;
		margin-right: 10rpx;
		border: 1px dotted gray;
	}
</style>